<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>HealtyProject</title>
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
  <link rel="stylesheet" href="my.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
  <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
  <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.ja.utf8.js"></script>
  <script src="my.js"></script>

  <!-- User-generated css -->
  <style>
    
  </style>

  <!-- User-generated js -->
  <script language="JavaScript" type="text/javascript">

    var baseUrl = "http://localhost:8888/HealtyProject/";
  
    $(function() {
    });

	function login() {
		dd = new Date();
		yy = dd.getYear();
		mm = dd.getMonth() + 1;
		dd = dd.getDate();
		if (yy < 2000) { yy += 1900; }
		if (mm < 10) { mm = "0" + mm; }
		if (dd < 10) { dd = "0" + dd; }
		$("#date").val((yy + "/" + mm + "/" + dd));
		
		$.ajax({
            type: "GET",
            url: baseUrl + "searchUser.jsp",
            cache: false,
            dataType:"json", 
            data: "name=" + $("#name").val() + "&pass=" + $("#password").val(),
            success: function(json) {
            	if (json.login) {
            		getWeight();
            		$("#recordName").val($("#name").val());
            		$.mobile.changePage("#page1", {
						reverse: false,
						changeHash: false
					});
            	}
            },
            error: function(json, test){ alert(test);}
        });
        getAllGoal();
	}
	
	function changeName() {
		$("#name").val($("#recordName").val());
		getGoal();
		getWeight();
	}
	
	function getGoal() {
		$.ajax({
            type: "GET",
            url: baseUrl + "getSelfGoalProgress.jsp",
            cache: false,
            data: "name=" + $("#name").val() ,
            success: function(json) {
                var finishTime = Date.parse(json.finishDate);
            	var nowTime = new Date().getTime();
            	$("#mykigen").html("期限：" + json.finishDate + "（" + Math.ceil(((finishTime - nowTime)/86400000)) + "日）");
            	$("#mygoal").html("目標：" + json.goalWeight + "Kg");
            	$("#myweight").html("現在：" + json.nowWeight + "Kg");
            	$("#myNokori").html("残り：" + (json.goalWeight - json.nowWeight).toFixed(1) + "Kg");
            },
            error: function(){}
        });
	}
	
	function getAllGoal() {
		$.ajax({
            type: "GET",
            url: baseUrl + "getAllGoalProgress.jsp",
            cache: false,
            success: function(json) {
            	$("#goalUl").html("");
            	$.each(json, function(key, value) {
	            	var finishTime = Date.parse(value.finishDate);
    	        	var nowTime = new Date().getTime();
    	        	var ulStr = "";
	        		ulStr = "<li data-role='list-divider' role='heading'>";
	                    ulStr += value.name + "さんの目標";
	                ulStr += "</li>";
	                ulStr += "<li data-theme='c'>";
	                    ulStr += "<a href='#' data-transition='none'>";
	                    ulStr += "期限：" + value.finishDate + "（" + Math.ceil(((finishTime - nowTime)/86400000)) + "日）";
	                    ulStr += "</a>";
	                ulStr += "</li>";
	                ulStr += "<li data-theme='c'>";
	                    ulStr += "<a href='#' data-transition='none'>";
	                    	ulStr += "目標：" + value.goalWeight + "Kg";
	                    ulStr += "</a>";
	                ulStr += "</li>";
	                ulStr += "<li data-theme='c'>";
	                    ulStr += "<a href='#' data-transition='none'>";
	                    	ulStr += "現在：" + value.nowWeight + "Kg";
	                    ulStr += "</a>";
	                ulStr += "</li>";
	                ulStr += "<li data-theme='c'>";
	                var zanWeight = (value.goalWeight - value.nowWeight).toFixed(1);
	                if (zanWeight > 0) {
	                	zanWeight = 0;
	                }
	                    ulStr += "<a href='#' data-transition='none'>";
	                    	ulStr += "残り：" + zanWeight + "Kg";
	                    ulStr += "</a>";
	                ulStr += "</li>"
	                $("#goalUl").append(ulStr);
            	});
            	$("#goalUl").listview("refresh");
            	$('#goalUl').trigger("create");
            },
            error: function(){}
        });
	}
	
	function loadSaveWeight(i) {
		if (weightJson[i]) {
			$("#date").val(weightJson[i].date);
			$("#weight").val(weightJson[i].weight);
			$("#memo").val(weightJson[i].memo);
			$.mobile.changePage("#page7", {
				reverse: false,
				changeHash: true
			});
		}
	}
	
	function saveWeight() {
		var weight = $("#weight").val();
		weight = weight.replace("#", ".");
		weight = weight.replace("*", ".");
		$.ajax({
            type: "GET",
            url: baseUrl + "saveWeight.jsp",
            cache: false,
            data: "name=" + $("#recordName").val() + "&date=" + $("#date").val() + "&weight=" + weight + "&memo=" + $("#memo").val(),
            success: function(json) {
            	if (json.saved) {
            		getAllGoal();
					getWeight();
					alert("登録成功");
            	} else {
            		alert("登録失敗");
            	}
            },
            error: function(){}
        });
	}
	
	var weightJson;
	function getWeight() {
		//$("#weights").html("<ul data-role='listview' data-divider-theme='b' data-inset='true' id='weightUl'><li data-role='list-divider' role='heading'>日付ー体重ーメモ</li></ul>");
		$(".weightClass").remove();
		$.ajax({
            type: "GET",
            url: baseUrl + "getWeight.jsp",
            cache: false,
            data: "name=" + $("#name").val(),
            success: function(json) {
            	weightJson = json[0];
            	for (var i = 0; i < json[0].length; i++) {
            		if (!json[0][i].memo) {
            			json[0][i].memo = "";
            		}
            		$("#weightUl").append("<li class='weightClass' data-theme='c'><a data-transition='none' onclick='loadSaveWeight(" + i + ");'>" + json[0][i].date + "ー" + json[0][i].weight + "ー" + json[0][i].memo + "</a></li>");
            	}
            	$("#weightUl").listview("refresh");
            	$('#weightUl').trigger("create");
            },
            error: function(){}
        });
	}
	
	function gotoTop() {
		$.mobile.changePage( "#page1", {
			reverse: false,
			changeHash: false
		});
	}
	
	function gotoInputWeight() {
		$.mobile.changePage("#page7", {
			reverse: false,
			changeHash: false
		});
	}
	
	function gotoConf() {
		$.mobile.changePage("#page9", {
			reverse: false,
			changeHash: false
		});
	}
	
  </script>
</head>
<body>
  <!-- Login -->
  <div data-role="page" data-theme="e" id="page10">
      <div data-theme="e" data-role="header" data-position="fixed">
          <h3>
              ログイン画面
          </h3>
      </div>
      <div data-role="content">
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="name">
                      ユーザ名
                  </label>
                  <input name="name" id="name" placeholder="ご希望のユーザ名を入力して下さい" type="text">
              </fieldset>
          </div>
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="password">
                      パスワード
                  </label>
                  <input name="password" id="password" placeholder="パスワードを入力して下さい" value=""
                  type="password">
              </fieldset>
          </div>
          <a data-role="button" data-transition="none" data-inline="true" onclick="login();">
              ログイン
          </a>
          <a data-role="button" data-inline="true" data-transition="slide" href="#page1">
              新規登録
          </a>
      </div>
  </div>
  <!-- Home -->
  <div data-role="page" data-theme="e" id="page1">
      <div data-theme="e" data-role="header" data-position="fixed">
          <h3>
              ダイエット
          </h3>
      </div>
      <div data-role="content">
          <ul id="goalUl" data-role="listview" data-divider-theme="b" data-inset="true">
          </ul>
      </div>
      <div data-role="tabbar" data-iconpos="top" data-theme="e">
          <ul>
              <li>
                  <a href="#" data-transition="none" data-theme="" data-icon="home">
                      トップ
                  </a>
              </li>
              <li>
	              <a href="#page7" data-transition="none" data-theme="" data-icon="star">
	                  今日の体重
	              </a>
	          </li>
	          <li>
	              <a href="#page9" data-transition="none" data-theme="" data-icon="search">
	                  確認する
	              </a>
	          </li>
          </ul>
      </div>
  </div>
  <!-- Record -->
  <div data-role="page" data-theme="e" id="page7">
      <div data-theme="e" data-role="header">
          <h3>
              体重を記録する
          </h3>
          <select name="recordName" id="recordName" onchange="changeName();" >
          	<option value="A">Aさん</option>
          	<option value="O">Oさん</option>
          	<option value="F">Fさん</option>
          	<option value="S">Sさん</option>
          	<option value="N">Nさん</option>
          	<option value="薫">NIさん</option>
          </select>
      </div>
      <div data-role="content">
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="date">
                      日付
                  </label>
                  <input name="date" id="date" type="email" value=""/>
                  <!-- <input name="date" id="date" type="date" data-role="datebox" data-options='{"mode": "calbox"}' value="" /> -->
              </fieldset>
          </div>
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="weight">
                      体重(kg)
                  </label>
                  <input name="" id="weight" placeholder="" value="" type="number">
              </fieldset>
          </div>
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="memo">
                      メモ
                  </label>
                  <textarea name="" id="memo" placeholder=""></textarea>
              </fieldset>
          </div>
          <a data-role="button" data-inline="true" href="#" data-icon="plus"
          data-iconpos="left" onclick="saveWeight();">
              登録
          </a>
          <a data-role="button" data-rel="back" data-inline="true" href="#page7" data-icon="delete"
          data-iconpos="left">
              キャンセル
          </a>
      </div>
      <div data-role="tabbar" data-iconpos="top" data-theme="e">
	      <ul>
	          <li>
	              <a href="#" onclick="gotoTop();"　data-transition="none" data-theme="" data-icon="home">
	                  トップ
	              </a>
	          </li>
	          <li>
	              <a href="#page7" data-transition="none" data-theme="" data-icon="star">
	                  今日の体重
	              </a>
	          </li>
	          <li>
	              <a href="#" onclick="gotoConf();" data-transition="none" data-theme="" data-icon="search">
	                  確認する
	              </a>
	          </li>
	      </ul>
      </div>
  </div>
  <!-- Watch -->
  <div data-role="page" data-theme="e" id="page9">
      <div data-theme="e" data-role="header">
          <h3>
              体重を確認する
          </h3>
      </div>
      <div data-role="content" id="weights">
          <ul data-role='listview' data-divider-theme='b' data-inset='true' id='weightUl'><li data-role='list-divider' role='heading'>日付ー体重ーメモ</li></ul>
      </div>
      <div data-role="content">
      	
          <div class="ui-grid-b">
          </div>
          <a data-role="button" data-inline="true" href="#page9" data-icon="arrow-l"
          data-iconpos="left">
              前へ
          </a>
          <a data-role="button" data-inline="true" href="#page9" data-icon="arrow-r"
          data-iconpos="right">
              次へ
          </a>
      </div>
      <div data-role="tabbar" data-iconpos="top" data-theme="e">
          <ul>
              <li>
                  <a href="#" onclick="gotoTop();" data-transition="none" data-theme="" data-icon="home">
                      トップ
                  </a>
              </li>
              <li>
                  <a href="#" onclick="gotoInputWeight();" data-transition="none" data-theme="" data-icon="star">
                      今日の体重
                  </a>
              </li>
              <li>
                  <a href="#page9" data-transition="none" data-theme="" data-icon="search">
                      確認する
                  </a>
              </li>
          </ul>
      </div>
  </div>
</body>
</html>
